<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/userwelcome' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item>卡包服务</el-breadcrumb-item>
      <el-breadcrumb-item>我的卡包</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <div class="clearfix title">
        <span class="title-text">我的卡包</span>
      </div>

      <!-- 卡包列表 -->
      <!-- 水平线 -->
      <el-divider content-position="right">
        <i class="el-icon-bank-card"></i>
        <!-- 总积分: {{ totalscoreNumber }} -->
      </el-divider>

      <!-- 会员卡列表 -->
      <el-row :gutter="20">
        <el-col
          :span="6"
          v-for="item in cardInfo.slice(0, cardListNum.num)"
          :key="item.VIP_id"
        >
          <div class="grid-content bg-purple" @click="detailsPage(item)">
            <el-tooltip
              class="item"
              effect="light"
              :content="item.cardName + item.cardComment"
              placement="bottom"
            >
              <!-- 卡片样式 -->
              <el-card class="card-box">
                <!-- 图片 -->
                <!-- :src="'http://qtpd7mr9w.hn-bkt.clouddn.com/'+item.cardPicture" -->
                <el-image
                  style="width: 100%"
                  :src="item.cardPicture"
                ></el-image>
                <span>积分:{{ item.scoreNumber }}</span>
              </el-card>
            </el-tooltip>
          </div>
        </el-col>

        <!-- 更多卡片 -->
        <el-col :span="6" v-show="cardInfo.length >= 7">
          <div class="grid-content bg-purple">
            <!-- 卡片样式 -->
            <div @click="moreCards">
              <el-card class="card-box more-card">
                <el-image
                  style="width: 100%"
                  :src="
                    require('../../../../../src/assets/img/cardPack/white.png')
                  "
                ></el-image>
                {{ cardListNum.prompt }}
              </el-card>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
// 卡片接口
import { getAllCard } from "network/cardpack";
export default {
  name: "MyCardPack",
  data() {
    return {
      // 取出接口里面的数组
      card: [],
      // 会员卡列表
      cardList: [],
      // 截取的数量
      cardListNum: { sign: true, num: 7, prompt: "更多卡片" },
      // 存取卡包数据的
      cardInfo:[]
    };
  },
  methods: {
    // 跳转到详情页面
    detailsPage(card) {
      
      let strItem = JSON.stringify(card);
      strItem = encodeURIComponent(strItem);
      this.$router.push({
        path: "/detailsPage",
        // 路由传参的参数
        query: {
          // 将对象传入
          cardObj: strItem,
        },
      });
    },

    // 跳转到领取卡包页面
    moreCards() {
      this.cardListNum.sign = !this.cardListNum.sign;
      if (this.cardListNum.sign == true) {
        this.cardListNum.num = 7;
        this.cardListNum.prompt = "更多卡片";
      } else {
        this.cardListNum.num = this.cardInfo.length;
        this.cardListNum.prompt = "收缩卡包";
      }
    },
  },
  created() {
    // 创建卡片数据

    // let cardSee = new FormData();
    // cardSee.append("userIdTel", this.$store.state.UserTelId);
    // /**
    //  * 拿到卡包数据的网络请求
    //  */
    // getAllCard(cardSee).then((res) => {
    //   // console.log(this.card)
    //   // console.log("1")
    //   // console.log(res.data[1]);
    //   for (let i = 0; i < res.data.data.length; i++) {
    //     // 将接口拿到的数据拷贝到card数组中
    //     this.card.push(res.data.data[i]);
    //     // console.log(this.card[i]);
    //   }
    //   // console.log(this.card)
    //   // console.log("2")
    //   // 将card数组赋值给cardList数组
    //   // console.log("changdu"+this.card.length);
    //   for (let i = 0; i < this.card.length; i++) {
    //     this.cardList.push({
    //       cardId: this.card[i].card_id,
    //       cardName: this.card[i].card_name,
    //       cardComment: this.card[i].card_comment,
    //       scoreNumber: 100,
    //       cardPicture:
    //         "http://qt8epcjwi.hn-bkt.clouddn.com/img/headImg/" +
    //         this.card[i].card_picture,
    //     })
    //   }
    //   // console.log("changdu"+this.card.length);
    //   // console.log(this.card)

    //   // console.log(this.card)
    //   // console.log("3")
    //   // 将卡片存储在session
    //   sessionStorage.setItem("cardInfo",JSON.stringify(this.cardList))
    //   this.cardInfo=JSON.parse(sessionStorage.getItem("cardInfo"))
     
    // });

    //拿到sessionStorage里的数据
    this.cardInfo=JSON.parse(sessionStorage.getItem("cardInfo"))
    // console.log(this.cardInfo);
    
  },

  computed: {
    totalscoreNumber() {
      let result = 0;
      for (let card of this.cardList) {
        result += card.scoreNumber;
      }
      return result;
    },
  },
};
</script>

<style lang="less" scoped>
a {
  text-decoration: none;
}
.box-card {
  .title {
    height: 40px;
    line-height: 40px;
  }
  .title-text {
    font-size: larger;
    font-weight: bolder;
    display: block;
    text-align: center;
  }
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  width: 14%;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>